﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <script src="../../Scripts/common.js"></script>

    <link href="../WebSys/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../../Scripts/layer/layui.all.js"></script>
    <script src="template/template.js"></script>
    <script type="text/javascript" charset="utf-8">
        function openLeftMenu() {
            mui('.mui-off-canvas-wrap').offCanvas('show');
        }
        $(document).ready(function () {
            init();

        });

        function init() {
            getMenu();
            layui.config({
                base: '../WebSys/src/js/',
                version: '1.0.2'
            }).use(['utils', 'jquery'], function () {
                var utils = layui.utils,
                    $ = layui.jquery,
                    layer = layui.layer;

                var currentUrl = "";
                $(".mui-card").on("touchstart", "a", function (e) {
                    var url = $(e.target).attr("data-url");
                    if (url != undefined) {
                        $("#mainTitle").html($(e.target)[0].innerText);
                        mui('.mui-off-canvas-wrap').offCanvas().toggle();

                        load(url);
                    }
                });

                function load(url) {
                    currentUrl = url;
                    if (url == "")
                        return;
                    layer.load(0, { shade: false });
                    $("#mainContainer").html('<iframe width="100%"  height="100%" src="' + url + '"></iframe>');
                    $("#mainContainer").find('iframe').on('load', function () {
                        layer.closeAll('loading'); //关闭加载层
                    });
                }

                //加载主页
                load("../WebSys/RightDefaullt.aspx");

                $(".mui-icon-reload").on("touchstart", function () {
                    load(currentUrl);
                });
            });
        }

        function getMenu() {

            $.ajax({
                type: "GET",
                url: "./Controlers/IndexAshx.ashx?flag=init",
                dataType: "html",
                success: function (dataStr, status) {
                    try {
                        var data = JSON.parse(dataStr);
                        if (data.code == 0) {
                            $("#UserName").html(data.username);
                            $("#LoginTime").html("登录于" + data.time);

                            var html = template("menu-tpl", {
                                detail: data.data
                            });
                            $(".mainLeftMenuDiv").html(html);
                        }
                        else {
                            window.location.href = '../WebSys/Login_Out_Fire.aspx?alert=4';
                        }
                    } catch (err) {
                        mui.alert("获取菜单失败!");
                    }
                },
                error: function () {
                    //错误处理
                    mui.alert("获取菜单失败!");
                }
            });

        }
    </script>

    <style>
        .mui-table-view {
            margin-top: -5px !important;
        }

        .mainLeftMenuDiv:before {
            border-top: 1px solid #e2e2e2 !important;
        }
    </style>
    <script type="text/html" id="menu-tpl">
        {{each detail as item i}}
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#"><i class="{{item.icon}}" style="font-size:17px;color:{{item.color}}"></i>&nbsp;{{item.name}}</a>
            <div class="mui-collapse-content">
                <ul class="mui-table-view">
                    {{each detail[i].menuList as item1 i}}
                    <li class="mui-table-view-cell"><a href="###" data-url="{{item1.url}}"><i class="{{item1.icon}}" style="font-size:16px;color:{{item1.color}}"></i> &nbsp;{{item1.name}}</a></li>
                    {{/each}}
                </ul>
            </div>
        </li>
        {{/each}}
    </script>
</head>
<body>
    <div class="mui-off-canvas-wrap mui-draggable ">
        <!-- 菜单容器 -->
        <aside id="leftNav" class="mui-off-canvas-left">
            <div class="mui-scroll-wrapper" style="background-image: url(./images/leftMenuBg.jpg);">
                <div class="mui-scroll" style="">
                    <div class="mui-card-header mui-card-media">
                        
                        <img src="./images/icon.jpg" />
                        <div class="mui-media-body">
                            <p style="font-size:16px" id="UserName">
                                
                            </p>
                            
                            <p id="LoginTime">登录于2016-06-30 15:30</p>
                        </div>

                    </div>
                    <div class="mui-card">
                        <!--内容区-->
                        <div class="mui-card-header"><a href="###" data-url="../WebSys/RightDefaullt.aspx">广东产品流向</a></div>
                        <div class="mui-card-content">
                            <ul class="mui-table-view mainLeftMenuDiv"></ul>
                        </div>
                    </div>
                </div>
                <div class="mui-card-header mui-card-media" style="position:absolute;bottom:0px!important">

                    <button type="button" class="mui-btn mui-btn-outlined" onclick="window.location.href = '../WebSys/Index.aspx'" style="color:white">返回电脑版</button>
                    <button type="button" class="mui-btn mui-btn-outlined" onclick="javascript: layerAlertAndGoUrl('确定退出吗？', '../WebSys/Login_Out_Fire.aspx?alert=4');" style="color:white">退出登录</button>
                </div>
            </div>
        </aside>
        <!-- 主页面容器 -->
        <div class="mui-inner-wrap">
            <!-- 主页面标题 -->
            <header class="mui-bar mui-bar-nav">
                <a href="#leftNav" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
                <h1 class="mui-title" id="mainTitle">主页</h1>
                <a class="mui-icon mui-icon-reload mui-pull-right"></a>
            </header>
            <div class="mui-content mui-scroll-wrapper" id="mainContainer" style="overflow:scroll">
            </div>
        </div>
    </div> 
</body>
</html>